<template>
    <div>
        <Form ref="formInline" inline :label-width="65">
            <showRule name="addRoleBtn">
                <Button @click="showAddRoleDrawer(false)" type="primary">添加角色</Button>
            </showRule>
        </Form>
        <br>
        <Table row-key="id" :columns="columns" :data="list" border :highlight-row="true" max-height="600" stripe>
            <template slot-scope="{ row , index}" slot="memberSlot">
                <showRule name="editRoleBtn">
                    <Button @click="showAddRoleDrawer(row)" type="info" size="small">编辑</Button>
                </showRule>
                <showRule name="editRuleBtn">
                    <Button @click="editRoleRule(row)" type="primary" size="small" style="margin-left: 3px;">权限</Button>
                </showRule>
                <showRule name="delRoleBtn">
                    <Button @click="delRole(row.id)" type="error" size="small" style="margin-left: 3px;">删除</Button>
                </showRule>

            </template>
        </Table>
        <br>
        <!-- <paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
        </paginate> -->
        <Drawer title="角色信息" :closable="false" width="40" v-model="showAdd">
            <Form ref="formValidate" :model="roleInfo" :rules="ruleInline" :label-width="100">
                <FormItem label="上级角色">
                    <Select v-model="roleInfo.pid" filterable>
                        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.role_name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="角色名称" prop="role_name">
                    <Input v-model="roleInfo.role_name" placeholder="角色名称"></Input>
                </FormItem>
                <FormItem label="角色状态">
                    <i-switch v-model="roleInfo.is_del">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </FormItem>
                <!-- <FormItem label="排序值">
                    <Input v-model="roleInfo.sort" placeholder="排序值" type="number"></Input>
                    <Alert type="warning">排序值由大到小排列</Alert>
                </FormItem> -->
                <FormItem>
                    <Button type="primary" @click="submit">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
        <rule ref="ruleRef"></rule>
    </div>
</template>

<script>
import paginate from "@/components/paginate/paginate.vue";
import rule from "./rule";
import _ from 'view-design/dist/styles/iview.css'
export default {
    components: {
        paginate,
        rule,
    },
    data() {
        return {
            roleId: 0,
            roleList: [],
            // 列表
            columns: [
                {
                    title: '角色名称',
                    key: 'role_name',
                    tree: true
                },
                // {
                //     title: '排序',
                //     key: 'sort',
                // },
                {
                    title: '状态',
                    key: 'is_del',
                    render: function (h, param) {
                        let text = param.row.is_del == 0 ? '开启' : '关闭';
                        return h('div', text);
                    }
                },
                {
                    title: '管理',
                    key: 'make',
                    slot: 'memberSlot',
                    minWidth: 100,
                },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,

            },
            showAdd: false,
            // 管理信息
            roleInfo: {
                id: 0,
                pid: 1,
                sort: 0,
                role_name: "",
                is_del: true,
            },
            ruleInline: {
                role_name: [{ required: true, message: '名称', trigger: 'blur' }],
            },
        }
    },
    methods: {
        changePage(page) {
            this.searchData.page = page;
            this.getRoleList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getRoleList();
        },
        getRoleList() {
            const param = {
                ...this.searchData
            };
            this.$axios('/admin/role/getRoleList', param).then(res => {
                this.list = res;
            });
        },
        // 显示添加角色弹窗
        showAddRoleDrawer(row) {

            if (row) {
                this.roleInfo.id = row.id;
                this.roleInfo.pid = row.pid;
                this.roleInfo.sort = row.sort;
                this.roleInfo.role_name = row.role_name;
                this.roleInfo.is_del = row.is_del == 0 ? true : false;
            } else {
                this.roleInfo = {
                    id: 0,
                    pid: 1,
                    sort: 0,
                    role_name: "",
                    is_del: true,
                };
            }
            this.$axios('/admin/role/getSelfAndNextRoleList').then(res => {
                this.roleList = res;
            });
            this.showAdd = true;
        },
        // 添加角色
        submit() {
            let params = {
                id: this.roleInfo.id,
                pid: this.roleInfo.pid,
                sort: this.roleInfo.sort,
                role_name: this.roleInfo.role_name,
                is_del: this.roleInfo.is_del ? 0 : 1
            };
            this.$axios('/admin/role/save', params).then(res => {
                this.$Message.success('保存成功');
                this.showAdd = false;
                this.getRoleList();
            })
        },
        /**
         * 规则编辑
         */
        editRoleRule(row) {
            this.$refs.ruleRef.showRules(row.id);
        },
        delRole(id) {
            this.$Modal.confirm({
                title: '删除操作',
                content: "<p>您确定要删除吗？</p>",
                onOk: () => {
                    this.$axios('/admin/role/del', { id: id }).then(res => {
                        this.$Message.success('删除成功');
                        this.getRoleList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        },
    },
    created() {
        // 查询自己管理员
        this.roleId = localStorage.getItem('roleId');
        this.getRoleList();
    }
}
</script>

<style></style>
